<template>
  
  <div style="margin-top: 20px">
    <div style="margin-left:15px; margin-top:10px; margin-bottom:10px; font-size:13px;"><label>请选择上报城市</label></div>
    <el-cascader-panel
      v-model="obj.pca"
      :options="pca"
      :props="{ label: 'name', value: 'name' }"
      @change="findData"
    ></el-cascader-panel>

    <div style="margin-top: 50px">
      <div style="width: 50%; float: left">
        <div style="margin-left:80px; margin-top:10px; margin-bottom:35px; color:red; font-size:13px;"><label>* 温馨提示：请先选择城市，再录入数据</label></div>
        <el-form ref="form"  :rules='rules' class="demo-form" :model="obj" label-width="80px">
          <el-form-item label="确诊" prop='confirmed'>
            <el-input v-model="obj.confirmed" placeholder="请输入确诊人数"></el-input>
          </el-form-item>
          <div style="height: 30px;"></div>
          <el-form-item label="疑似" prop='suspected'>
            <el-input v-model="obj.suspected" placeholder="请输入疑似人数"></el-input>
          </el-form-item>
          <div style="height: 30px;"></div>
          <el-form-item label="死亡" prop='dead'>
            <el-input v-model="obj.dead" placeholder="请输入死亡人数"></el-input>
          </el-form-item>
          <div style="height: 30px;"></div>
          <el-form-item label="治愈" prop='cure'>
            <el-input v-model="obj.cure" placeholder="请输入治愈人数"></el-input>
          </el-form-item>
          <div style="height: 30px;"></div>
          <el-form-item label="重症" prop='severe'>
            <el-input v-model="obj.severe" placeholder="请输入重症人数"></el-input>
          </el-form-item>
          <div style="height: 30px;"></div>
          <el-form-item label="境外输入" prop='outside'>
            <el-input v-model="obj.outside" placeholder="请输入境外输入人数"></el-input>
          </el-form-item>
          <div style="height: 30px;"></div>

          <el-form-item>
    
            <el-tooltip class="item" effect="dark" content="提交上报数据" placement="bottom-end">
              <el-button type="success" plain @click="save" size='big' style="float:right;"><i class="el-icon-upload el-icon--right"></i>数据提交</el-button>
            </el-tooltip>
            
            <el-tooltip class="item" effect="dark" content="检验输入是否完整" placement="bottom">
              <el-button type="danger" plain @click="submitForm('form')" size='big' style="float:right; margin-right:10px;"><i class="el-icon-search"></i>数据校验</el-button>
            </el-tooltip>
            
            <el-tooltip class="item" effect="dark" content="重新输入" placement="bottom-start">
              <el-button type="warning" plain @click="resetLoginForm" size='big' style="float:right;"><i class="el-icon-magic-stick"></i>重置</el-button>
            </el-tooltip>
            
            
            <!-- <el-button type="warning" plain @click="submitForm('form')" size='big' style="float:right;"><i class="el-icon-magic-stick"></i>验证</el-button> -->
          </el-form-item>
        </el-form>
        
      </div>

    </div>

    <div style="width: 600px; height:600px; float:left; margin-left:100px;">
        <el-calendar v-model="value">
        </el-calendar>
    </div>

    <div style="height: 700px"></div>

  </div>
  
</template>

<script>
import pca from "../../assets/pca.json";
import { mapActions, mapState } from "vuex";
import moment from "moment";

export default {
  data() {
    var checkNum1 = (rule, value, callback)=>{
        // if (!value) {
        //   return callback(new Error('内容不能为空'));
        // }
        setTimeout(() => {
          if (!Number. isInteger(Number(value)) && value) {
            callback(new Error('请输入数字值'));
          }
        }, 1000);
    }

    var checkNum2 = (rule, value, callback)=>{
      setTimeout(() => {
        if (!Number. isInteger(Number(value)) && value) {
          callback(new Error('请输入数字值'));
        }
      }, 1000);
    }

    var checkNum3 = (rule, value, callback)=>{
      setTimeout(() => {
        if (!Number. isInteger(Number(value)) && value) {
          callback(new Error('请输入数字值'));
        }
      }, 1000);
    };

    var checkNum4 = (rule, value, callback)=>{
      setTimeout(() => {
        if (!Number. isInteger(Number(value)) && value) {
          callback(new Error('请输入数字值'));
        }
      }, 1000);
    };

    var checkNum5 = (rule, value, callback)=>{
      setTimeout(() => {
        if (!Number. isInteger(Number(value)) && value) {
          callback(new Error('请输入数字值'));
        }
      }, 1000);
    };

    var checkNum6 = (rule, value, callback)=>{
      setTimeout(() => {
        if (!Number. isInteger(Number(value)) && value) {
          callback(new Error('请输入数字值'));
        }
      }, 1000);
    };
    return {

      // 表单验证
      rules:{
        confirmed:[
            { required: true, message: '请输入确诊人数', trigger: 'blur' },
            { validator: checkNum4, trigger:'blur' }
        ],
        suspected:[{ 
          validator: checkNum5, trigger:'blur' 
        }],
        dead:[
            { required: true, message: '请输入死亡人数', trigger: 'blur' },
            { validator: checkNum6, trigger:'blur' }
        ],
        outside:[
          { required: true, message: '请输入境外输入人数', trigger: 'blur' },
          { validator: checkNum1, trigger:'blur' }
        ],
        cure:[{
          validator: checkNum2, trigger:'blur'
        }],
        severe:[{
          validator: checkNum3, trigger:'blur'
        }]
      },

      

      pca,
      obj: {
        country: "中国",
      },
    };
  },
  computed: {
    ...mapState("dataUpdate", ["dataList"]),
  },
  methods: {


    // 表单验证
    submitForm(res) {
      this.$refs[res].validate(valid => {
        this.save();
      });
    },




    ...mapActions("dataUpdate", ["saveOrupdate", "page_query"]),
    // 查询某地区当天是否录入数据
    findData(val) {
      // val[2]
      // moment(new Date()).format('YYYY-MM-DD')
      let params = {
        page: 1,
        pageSize: 1,
        area: val[2],
        inputTime: moment(new Date()).format("YYYY-MM-DD"),
      };
      this.page_query(params).then(()=>{
          if(this.dataList.total > 0) {
            // 修改 
            // 思路类似于表格的修改：
            // 将当前行的数据放入模态框的表单
            this.obj = this.dataList.list[0];
          }
      })
    },

    resetLoginForm() {
        this.$refs.form.resetFields();
    },

    // 数据上报
    save() {
      
      if(this.obj.pca) {
        this.obj.province = this.obj.pca[0];
        this.obj.city = this.obj.pca[1];
        this.obj.area = this.obj.pca[2];
        delete this.obj.pca;
      }
      
      this.saveOrupdate(this.obj).then((res) => {
        // 将res放入提示框
        console.log(res);
        this.$router.push({
          path: "/data_list/table",
        });
      });

      this.$alert('上报信息提交成功', '提示', {
        confirmButtonText: '确定'
      });
    }
  }
}
</script>



